<template>
  <div>
    <el-dialog title="公告" :visible.sync="isShow" width="55%" id="viewDialog">
      <div>
        <!-- 搜索框 -->
        <el-row class="search">
          <el-col :span="21" :offset="0">
            <el-input
              size="max"
              placeholder="请输入搜索关键字"
              prefix-icon="el-icon-search"
              width="100%"
              v-model="input1"
              @keyup.enter.native="searchHandler"
            ></el-input>
          </el-col>
          <el-button @click="searchHandler" class="btn" type="primary"
            >搜索</el-button
          >
        </el-row>
        <!-- 简要显示公告 -->
        <el-table border :data="gg_notice" class="notice">
          <!-- id -->
          <el-table-column
            label="id"
            prop="notice_id"
            sortable
            width="55px"
            align="center"
          ></el-table-column>
          <!-- 公告内容 -->
          <el-table-column
            show-overflow-tooltip
            label="公告内容"
            prop="notice_content"
            min-width="300px"
            align="center"
          ></el-table-column>
          <!-- 时间 -->
          <el-table-column
            label="时间"
            prop="notice_time"
            width="170px"
            align="center"
          ></el-table-column>
          <!-- 操作 -->
          <el-table-column
            label="操作"
            width="100px"
            height="50px"
            align="center"
          >
            <template v-slot="gg_notice">
              <el-button
                type="text"
                size="middle"
                @click="handleCheck(gg_notice.row.notice_id)"
              >
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="pager">
          <el-pagination
            id="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[3, 6, 9, 12]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div></div
    ></el-dialog>

    <!-- 查看详情 -->
    <!-- <div class="contentDetail" v-show="detailVisible"></div> -->
    <el-dialog class="contentDetail" :visible.sync="detailVisible">
      <h3>公告详情</h3>
      <close
        class="close"
        theme="two-tone"
        size="27"
        :fill="['#000000', '#ffffff']"
        :strokeWidth="3"
        strokeLinejoin="miter"
        strokeLinecap="butt"
        @click="changeDetailVisible"
      />
      <!-- 详细内容 -->
      <div id="content">&emsp;&emsp;{{ oneNotice.notice_content }}</div>
      <!-- 时间 -->
      <div id="time">
        {{ oneNotice.notice_time }}
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Close } from '@icon-park/vue'
export default {
  components: { Close },
  props: {
    dialogVisible: {
      default: false,
    },
  },
  data() {
    return {
      input1: '',
      detailVisible: false,
      searchData: [],
      gg_notice: [],
      oneNotice: [],
      // 分页器相关data
      page: 1, // 当前的页码数
      size: 3, // 每页显示记录数
      total: 0, // 记录总数
    }
  },
  watch: {
    input1() {
      if (this.input1 == '') {
        this.getAllnotice()
        console.log('监听到了')
      }
    },
  },
  computed: {
    isShow: {
      get() {
        return this.dialogVisible
      },
      set(val) {
        this.$emit('send', 'false')
      },
    },
  },
  mounted() {
    this.getAllnotice()
  },
  methods: {
    // 获取全部公告
    getAllnotice() {
      this.$http
        .get(`/gg_notice?page=${this.page}&size=${this.size}`)
        .then((res) => {
          // 1. 更新total
          this.total = res.result.total
          // 2. 更新users数组
          this.gg_notice = res.result.data
          // this.$emit('', this.gg_notice)
        })
    },
    // 分页相关
    handleSizeChange(newsize) {
      if (this.input1 == '' && this.input2 != '') {
        this.size = newsize //检测到每页显示条数size的改变,同时size的值由原来的2变成现在的被点击的值
        this.searchHandler()
      } else if (this.input2 == '' && this.input1 != '') {
        this.size = newsize //检测到每页显示条数size的改变,同时size的值由原来的2变成现在的被点击的值
        this.searchDelete()
      } else if (this.input1 == '' && this.input2 == '') {
        // 改变每页显示记录数
        this.size = newsize //检测到每页显示条数size的改变,同时size的值由原来的2变成现在的被点击的值
        this.getAllnotice()
      }
    },
    // 分页相关
    handleCurrentChange(newpage) {
      if (this.input1 == '' && this.input2 != '') {
        this.page = newpage //检测到页数改变同时page的值由原来的1变成了现在被点击的值
        this.searchHandler()
      } else if (this.input2 == '' && this.input1 != '') {
        this.page = newpage //检测到页数改变同时page的值由原来的1变成了现在被点击的值
        this.searchDelete()
      } else if (this.input1 == '' && this.input2 == '') {
        // 改变每页显示记录数
        this.page = newpage //检测到页数改变同时page的值由原来的1变成了现在被点击的值
        this.getAllnotice()
      }
    },
    //查看详情
    handleCheck(id) {
      this.$emit('send', false)
      this.detailVisible = true

      this.$http.get('/gg_notice/' + id).then((res) => {
        this.oneNotice = res.result
        console.log(this.oneNotice)
      })
    },
    // 关闭公告详情
    changeDetailVisible() {
      this.detailVisible = false
      this.$emit('send', true)
    },
    // 搜索
    searchHandler(m) {
      if (this.input1 != '') {
        this.$http
          .get(
            `/gg_notice/?notice_content=${this.input1}&page=${this.page}&size=${this.size}`
          )
          .then((res) => {
            if (res.result.total == 0) {
              this.$message({
                message: '您搜素的内容不存在,可尝试重新设置关键字查询',
                type: 'warning',
                duration: 1500,
              })
            } else {
              this.searchData = res.result.data
              this.total = res.result.total
              this.gg_notice = this.searchData
            }
          })
      } else {
        /* this.$message({
          message: "搜索内容不能为空?请重新输入!",
          type: "warning",
        }); */
        this.gg_notice = []
        this.getAllnotice()
      }
    },
  },
}
</script>

<style>
.contentDetail .close {
  position: absolute;
  cursor: pointer;

  right: 10px;
  top: 10px;
}
.contentDetail h3 {
  margin-bottom: 20px;
}
.contentDetail #content {
  margin-bottom: 30px;
}
.contentDetail #time {
  position: absolute;
  right: 20px;
  bottom: 15px;
}
.btn {
  margin-left: 10px;
  right: 10px;
}
</style>
